<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${dataItem.machineName || '无'}-运转详情`"
		width="1000px"
		:append-to-body="false"
		:show-close-btn="true"
		:show-confirm-btn="false"
		:show-cancel-btn="false"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<div ref="box2">
			<div>
				<div v-if="ruleForm.stateInfo" class="flex-center item-gap">
					<div class="state-box" :style="{ borderColor: ruleForm.stateInfo.color, color: ruleForm.stateInfo.color }">{{ ruleForm.stateInfo.name }}</div>
				</div>
			</div>
			<div class="flex-between-center margin-bottom-4">
				<el-tag type="primary" effect="plain" class="">
					<span class="el-icon-tickets item-gap"></span>
					<span>排产信息</span>
				</el-tag>
				<div class="flex-start-center">
					<div v-if="dataItem.typeCode === 'MASTER'" class="flex-center" style="display: flex;align-items: center;font-size: 13px;">
						<el-avatar size="small" icon="el-icon-user-solid" class="item-gap"></el-avatar>
						<span class="margin-right-0">{{ ruleForm.machineEmpVList && ruleForm.machineEmpVList.length ? ruleForm.machineEmpVList.map(x => x.empName).join() : '无' }}</span>
					</div>
					<!--<el-button :loading="refreshBtnLoading" circle type="primary" icon="el-icon-refresh" size="small" @click="onRefreshBtn"></el-button>-->
				</div>
			</div>
			<jk-card style="max-height: 100px;overflow: auto;">
				<el-form label-width="140px" :show-message="false" size="mini">
					<el-row class="flex-start-center-wrap">
						<el-col :span="8">
							<el-form-item class="machine-detail-form-item" label="排产品种:">
								<span class="read-only-212">{{ ruleForm.productName || '无' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="machine-detail-form-item" label="排产批号:">
								<span class="read-only-212">{{ ruleForm.batchCode || '无' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item class="machine-detail-form-item" label="当班产量(kg):">
								<span class="read-only-212">{{ ruleForm.currentShiftQty || '无' }}</span>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</jk-card>
			<production-card
				:machine-item="dataItem"
				:rule-form="ruleForm"
			></production-card>
			<div v-if="dataItem.processCode !== 'FJ-YQJ'">
				<div class="flex-between-center margin-bottom-4 margin-top-10">
					<el-tag type="primary" effect="plain" class="">
						<span class="el-icon-odometer item-gap"></span>
						<span>能耗信息</span>
					</el-tag>
				</div>
				<jk-card>
					<el-form label-width="140px" :show-message="false" size="mini">
						<el-row>
							<el-col :span="6">
								<el-form-item class="machine-detail-form-item" label="当班电能(kw·h):">
									<span class="read-only-212">{{ ruleForm.currentScheduleShiftElectric || '' }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<!--梳棉1-1至1-10，细纱1至22和空压机不显示电流信息-->
						<el-row v-if="!filterMachineList.includes(dataItem.machineName) && dataItem.processCode !== 'FJ-KYJ'" class="flex-start-center-wrap">
							<el-col :span="6">
								<el-form-item class="machine-detail-form-item" label="A相电流(A):">
									<span class="read-only-212">{{ ruleForm.aelectricCurrent || '' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item class="machine-detail-form-item" label="B相电流(A):">
									<span class="read-only-212">{{ ruleForm.belectricCurrent || '' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item class="machine-detail-form-item" label="C相电流(A):">
									<span class="read-only-212">{{ ruleForm.celectricCurrent || '' }}</span>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</jk-card>
			</div>
		</div>
		<!--<div ref="box3" class="flex-between-center margin-bottom-4 margin-top-10">
			<el-tag type="primary" effect="plain" class="">
				<span class="el-icon-paperclip item-gap"></span>
				<span>工艺信息</span>
			</el-tag>
		</div>
		<div class="chart-list" :style="{ height: `${dialogTableHeight - 20}px` }">
			<div v-loading="showLoading" class="chart-list-inner">
				<el-row v-if="ruleForm.specMonitoringParamsList.length" :gutter="12">
					<el-col
						v-for="(item, index) in ruleForm.specMonitoringParamsList"
						:key="index"
						:span="12"
						style="margin-bottom: 10px;box-sizing: border-box;"
					>
						<jk-card :show-header="false">
							<div class="width-100-percent flex-between-center margin-bottom-10">
								<div style="font-size: 16px;">{{ item.specParamName }}({{ item.typeName }})</div>
								<div class="flex-end-center" style="font-size: 12px;color: #808695;">
									<div class="margin-right-10">当前值: {{ item.currentValue || 0 }}</div>
									<div>标准值: {{ transferData(item) }}</div>
								</div>
							</div>
							<div style="height: 180px;">
								<trend-chart
									:chart-data="item"
								></trend-chart>
							</div>
						</jk-card>
					</el-col>
				</el-row>
				<div v-else class="flex-center" style="height: 100%;">
					<span>暂无工艺项</span>
				</div>
			</div>
		</div>-->
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import trendChart from './components/trend-chart';
    import {
        productionMachineSpecMonitoringRecordGetSpecMonitoring,
        reportMachineStateInfo
    } from '../../../api/production/productionMonitor';
    import { machineStateList } from '../../../utils/jk/status-option-list';
    import productionCard from './components/detailCardItems/production-card';
    export default {
        name: 'MachineTechDetail',
        components: {
            productionCard,
            trendChart
        },
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataItem: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        data() {
            return {
                machineStateList: machineStateList,
                showDialog: false,
                showLoading: false,
                refreshBtnLoading: false,
                ruleForm: {
                    machineEmpVList: []
                },
                filterMachineList: [
                    'XS001', 'XS002', 'XS003', 'XS004', 'XS005', 'XS006', 'XS007', 'XS008', 'XS009', 'XS010', 'XS011', 'XS012', 'XS013', 'XS014', 'XS015', 'XS016', 'XS017', 'XS018', 'XS019', 'XS020', 'XS021', 'XS022',

                    'SM1-01', 'SM1-02', 'SM1-03', 'SM1-04', 'SM1-05', 'SM1-06', 'SM1-07', 'SM1-08', 'SM1-09', 'SM1-10'
                ]
            };
        },
        methods: {
            transferData(item) {
                return `${item.minValue || 0}<${item.value || 0}<${item.maxValue || 0}`;
            },
            onRefreshBtn() {
                this.refreshBtnLoading = true;
                this.getDependentData();
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getEnergyDetailRequest() {
                return reportMachineStateInfo({ machineId: this.dataItem.machineId }).then(res => {
                    if (res.data.status === 200) {
                        const resData = res.data.res || {};
                        this.ruleForm = resData;
                    }
                });
            },
            clearTimer() {
                clearInterval(this.timer);
            },
            getDependentData() {
                const p2 = this.getEnergyDetailRequest();
                Promise.all([p2]).then(() => {
                    this.showLoading = false;
                    this.refreshBtnLoading = false;
                });
            },
            runData() {
                this.clearTimer();
                this.getDependentData();
                this.timer = setInterval(() => {
                    this.getDependentData();
                }, 5000);
            }
        },
        destroyed() {
            this.clearTimer();
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.showLoading = true;
                    this.runData();
                } else {
                    this.clearTimer();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
    .header-box {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .header-item {
            width: 180px;
            border: solid 1px #dcdee2;
            border-radius: 6px;
            margin: 0 6px;
            box-sizing: border-box;
            overflow: hidden;
            box-shadow: 2px 4px 1px 2px #eee;
            transition: all .5s;
            .header-item-category-label {
                height: 38px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                //background: #f8f8f9;
                border-bottom: solid 1px #dcdee2;
            }
            .header-item-content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                padding: 6px 12px;
                box-sizing: border-box;
                background: #fff;
                .header-item-label {
                    font-size: 12px;
                }
                .header-item-val {
                    width: 100%;
                    font-size: 14px;
                    margin: 2px 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-sizing: border-box;
                    color: #515a6e;
                }

                /*.output-item {
                    color: #19be6b;
                }
                .qty-item {
                    color: #2d8cf0;
                }
                .energy-item {
                    color: rgb(169, 124, 246);
                }*/
            }
        }
        .output-m-box {
            border-color: #91d5ff;
            background: #e6f7ff;
            color: #1890ff;
        }
        .output-m-box:hover {
            box-shadow: 2px 4px 1px 2px #1890ff;
        }
        .output-kg-box {
            border-color: #ffbb96;
            background: #fff2e8;
            color: #fa541c;
        }
        .output-kg-box:hover {
            box-shadow: 2px 4px 1px 2px #fa541c;
        }
        .energy-box {
            border-color: #d3adf7;
            background: #f9f0ff;
            color: #722ed1;
        }
        .energy-box:hover {
            box-shadow: 2px 4px 1px 2px #722ed1;
        }
    }
    .chart-list {
        width: 100%;
        font-size: 13px;
        color: #515a6e;
        height: 300px;
        background: #f8f8f9;
        border-radius: 6px;
        overflow: hidden;
        padding: 12px 12px 0 12px;
        box-sizing: border-box;
        .chart-list-inner {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            box-sizing: border-box;
        }
    }
    .machine-detail-form-item {
        margin-bottom: 0!important;
    }
    .state-box {
        height: 32px;
        padding: 0px 10px;
        border-radius: 6px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        border: solid 1px #19be6b;
        font-size: 12px;
    }
</style>
